<div class="hidden-audio" id="hidden-audio-<%= @episode.slug %>" style="display:none" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
  <audio id="audio" data-episode="<%= @episode.slug %>" data-podcast="<%= @podcast.slug %>">
    <source src="<%= @episode.media_url %>" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <div id="progressBar" class="audio-player-display">
    <a href="/<%=@podcast.slug %>/<%=@episode.slug %>">
      <%=cl_image_tag(@episode.image_url || @podcast.image_url,
       :type=>"fetch",
       :crop => "fill",
       :width => 420,
       :height => 420,
       :quality => "auto",
       :sign_url => true,
       :flags => "progressive",
       :fetch_format => "auto",
       :id => "episode-profile-image")
       %>
      <img id="animated-bars" src="<%= asset_path('animated-bars.gif') %>" />
    </a>
    <span id="barPlayPause">
      <img class="butt play-butt" alt="play" src="<%=cloudinary("https://res.cloudinary.com/practicaldev/image/upload/f_auto/v1467584797/playbutt_o4jk1d.png",60,90,format="png") %>"/>
      <img class="butt pause-butt" alt="pause" src="<%=cloudinary("https://res.cloudinary.com/practicaldev/image/upload/f_auto/v1467584911/pausebutt_wrwpnr.png",60,90,format="png") %>"/>
    </span>
    <span id="volume">
      <span id="volumeindicator" class="volume-icon-wrapper showing">
        <span id="volbutt"><%= icon("volume",16) %></span>
        <span class="range-wrapper">
          <input type="range" name="points" id="volumeslider" value="50" min="0" max="100" data-show-value="true">
        </span>
      </span>
      <span id="mutebutt" class="volume-icon-wrapper hidden"><%= icon("volume-mute",16) %></span>
      <span class="speed" id="speed" data-speed=1 >1x</span>
    </span>
    <span class="buffer-wrapper" id="bufferwrapper">
      <span id="buffer"></span>
      <span id="progress"></span>
      <span id="time"></span>
      <span id="closebutt">[ x ]</span>
    </span>
  </div>
  <script>
    setTimeout(function(){
      initializePodcastPlayback();
      if (InstantClick){
        InstantClick.on('change', function() {
          initializePodcastPlayback();
        });
      }
    },350)
    setTimeout(function(){
      initializePodcastPlayback();
      if (InstantClick){
        InstantClick.on('change', function() {
          initializePodcastPlayback();
        });
      }
    },1000)
  </script>
</div>
